import React from 'react';
import { Form, Input, DatePicker } from 'antd';
import moment from 'moment';
import { ASelect, QueryFilterForm } from '@/components/SelfComp';
import { DataItem, QueryFormProps } from '@/types/global';
import { TaskQueryParam } from '@/types/task';
import { basicFormItemLangLayout } from '@/utils/commons';

export type TaskListQueryProps = QueryFormProps & {
  developerData: DataItem[];
  testerData: DataItem[];
  taskTypeData: DataItem[];
  taskStatusData: DataItem[];
  systemData: DataItem[];
}

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const dateFormat: string = 'YYYY-MM-DD';

const TaskListQueryForm: React.FC<TaskListQueryProps> = (props) => {

  const handleSubmit = (record: TaskQueryParam) => {
    const { taskDate, ...res } = record
    let startDate = '';
    let endDate = '';
    if (taskDate) {
      startDate = taskDate[0].format(dateFormat).replaceAll('-', '');
      endDate = taskDate[1].format(dateFormat).replaceAll('-', '');
    }
    const newRecord = {
      startDate,
      endDate,
      ...res
    }
    const { onSubmit } = props;
    onSubmit({
      ...newRecord
    });
  }

  const { colon, loading, onReset } = props;
  const { developerData, testerData, taskTypeData, taskStatusData, systemData } = props;
  const formItemLayout = basicFormItemLangLayout;
  const currentDateStr = moment().format(dateFormat);

  return (
    <QueryFilterForm
      colon={colon}
      loading={loading}
      onSubmit={handleSubmit}
      onReset={onReset}
    >
      <FormItem label="任务起止时间" name='taskDate' {...formItemLayout} colon={colon}
        rules={[
          { required: true, message: '任务起止时间必输' },
        ]}
        initialValue={[moment(currentDateStr, dateFormat), moment(currentDateStr, dateFormat)]}
      >
        <RangePicker format={dateFormat} style={{ width: '100%' }}/>
      </FormItem>
      <FormItem label="需求编号" name='cqCode' {...formItemLayout} colon={colon}>
        <Input placeholder='支持模糊查询' />
      </FormItem>
      <FormItem label="交易功能码" name='funcCode' {...formItemLayout} colon={colon}>
        <Input />
      </FormItem>
      <FormItem label="开发人员" name='developer' {...formItemLayout} colon={colon}>
        <ASelect dataSource={developerData} />
      </FormItem>
      <FormItem label="测试人员" name='tester' {...formItemLayout} colon={colon}>
        <ASelect dataSource={testerData} />
      </FormItem>
      <FormItem label="任务类型" name='taskType' {...formItemLayout} colon={colon}>
        <ASelect dataSource={taskTypeData} />
      </FormItem>
      <FormItem label="任务状态" name='status' {...formItemLayout} colon={colon}>
        <ASelect dataSource={taskStatusData} />
      </FormItem>
      <FormItem label="所属系统" name='systemCode' {...formItemLayout} colon={colon}>
        <ASelect dataSource={systemData} />
      </FormItem>
    </QueryFilterForm>
  );
}

export default TaskListQueryForm;